<template>
	<view>
		<view class="top">
			<text class="topTitle">请输入您的手机号,登录你的账号</text>
		</view>
		<view class="phoneNumber">
			<view class="phoneNumberTitle">
				<text>+86</text>
			</view>
			<input type="text" :value="phones" @input="onKeyInput" class="username" name="phone"  placeholder="请输入手机号"  placeholder-style="font-size:26upx" />
		</view>
		<view class="section">
			<input name="password" password="true" @input="onKeyPassword" maxlength="32"  placeholder="请输入密码" placeholder-style="font-size:26upx" class="password"/>
			<view class="eyesBox"  @click="eyes">
				<image src="http://rs.eonfox.cc/clzy/static/eyes.png" mode="" class="eyes"></image>
			</view>
		</view>
		<view class="section_verify" v-if="verifyCode.isNeed">
			<input class="verifyCodeText" type="text" v-model="verifyCode.code"  maxlength="6"  placeholder="请输入验证码" placeholder-style="font-size:26upx"/>
			<image class="verifyCodeImg" @click="getVerifyImage()" :src="verifyCode.codeImg"   ></image>
		</view>
		<view class="active">
			<button type="primary" class="activeBtn"  @click="next">开始</button>
		</view>
		<view class="agreement" >
			<span class="spantext" @click="goto_register">忘记密码</span>
		</view>
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
var ef = new eonfox();
export default {
	data() {
		return {
			phone: '',
			password: '',
			phones: "",
			verifyCodeImage: '',
			verifyCode:{
				isNeed:false,
				codeImg:'',
				code:''
			},
			oauthid:''
		};
	},
	onLoad(option) {
		this.getStroges();
		this.phones = option.phone;
		this.phone = option.phone;
		if(this.phone!=null){
			this.isVerify(this.phone)
		}
	},
	methods: {
		getStroges(){
			try {
			    const value = uni.getStorageSync('oauth_id');
			    if (value) {
			        console.log(value);
					this.oauthid = value
			    }
			} catch (e) {
			    console.log(e)
			}
		},
		onKeyInput: function(event) {
			this.phone = event.target.value;
			if (/^1[0-9]\d{9}$/.test(this.phone)){
				this.isVerify(this.phone)
// 				uni.showToast({
// 					title:'手机号有误',
// 					icon:'none'
// 				})
			}
		},
		onKeyPassword: function(event) {
			this.password = event.target.value;
		},
		next: function() {
			
			var _this=this
			var phone=this.phone,password=this.password;
			if (!/^1\d{10}$/.test(phone)){
				uni.showToast({
					title:'手机号有误',
					icon:'none'
				})
			}else if (password.length < 8 ||password.length > 24) {
				uni.showToast({
					title:'密码长度为8~24个字符',
					icon:'none'
				})
			}else {
				_this.isVerify()
				if(_this.verifyCode.isNeed==true){
					var req={ 
							phone: _this.phone, 
							password: _this.password,
							image_verify_code:_this.verifyCode.code,
							image_verify_key:'user/log_in' 
						}
				}else{
					var req={ 
							phone: _this.phone, 
							password: _this.password
						}
				}
				ef.submit({
					request: { s: ['USERLOGIN', [req]] },
					callback: function(data) {
						var result=data.data.s
						if(!result.errno){
							uni.showToast({
								title:'登录成功',
								icon:'success',
								success() {
									ef.submit({
										request:{
											u:['USERSELF',[{"oauth_id":_this.oauthid}]],
											p:['USERPHONESELFVERIFY']
										},
										callback:function(data){
											console.log(data)
											// return
											uni.setStorage({ //存进本地存储
												key:'userinfo',
												data:data
											})
										}
									})
									_this.bind()
									setTimeout(function(){
										uni.switchTab({
											url:
												'../../pages/me/me'
										});
									},1500)
								}
							})
							
						
						}else{
							if(_this.verifyCode.isNeed){
								_this.getVerifyImage()
							}
							uni.showToast({
								title:result.error,
								icon:'none'
							})
							
						}
						console.log(data);
						
					},
					error: function(err) {
						console.log('出错啦', err);
						uni.showToast({
							title:JSON.stringify(err),
							icon:'none'
						})
					}
				});
			} 
		},
		goto_register:function(){
			uni.navigateTo({
				url:
					'../../pagesA/forget-password/forget-password'
			})
		},
		isVerify:function(phone){//检测是否需要验证码
			console.log('检测是否需要验证码');
			var that=this;
			var ef = new eonfox();
			ef.submit({
				request:{s:['USERLOGINIMAGEVERIFYCODESTATE',[{phone:that.phone}]]},
				callback:function(data){
					console.log('检测结果：',data);
					if(!data.errno){
						console.log('验证码s：',data.data.s);
						if(data.data.s.data){
								//需要验证码
								console.log('验证码需要：',data.data.s);
								that.verifyCode.isNeed=true,
								that.getVerifyImage()
						}else{
							return;
						}
					}else{
						console.log('出错啦', data);
							uni.showToast({
								title:data.data.error,
								icon:'none'
							})
					}
					
				},
				error:function(){
					console.log('出错啦', err);
						uni.showToast({
							title:'出错啦',
							icon:'none'
						})
				}
			})
		},
		getVerifyImage() {
			var _this = this;
			var ef = new eonfox();
			ef.left_token(function(left_token){
				//encodeURIComponent  encodeURI
				
				let verifyImage = ef.api_server_url+"?"+encodeURI('data=[["SESSIONIMAGEVERIFYCODESHOW",[{"image_verify_key":"user/log_in","bg_color_rand":0,"bg_color":[242,242,242],"length":5,"width":200,"height":44}]]]')+"&token="+left_token;
				_this.verifyCode.codeImg = verifyImage;
			});
		},
		//绑定
		bind(){
			var _this=this
			console.log('oauth');
			uni.getStorage({
				key:'oauth',
				success(re) {
					if(re.data){
						_this.bind_()
					}
				}
			})
		},
		bind_(){
			console.log('bind');
			var _this=this
						// #ifdef MP-WEIXIN
						wx.login({
							success(res) {
								wx.getUserInfo({
									success(re) {
										re.code=res.code;
										console.log('re:',re);
										ef.submit({
											request:{s:['USERSELFBINDWEIXIN',['applet',re]]},
											callback(data){
												console.log(data);
												fns.unionid()
												return
											},
											error(err){
												fns.err('err',err)
											}
										})
									}
								})
							}
						})
						// #endif
						// #ifdef APP-PLUS
						uni.showToast({
							title:'正在绑定',
							icon:'loading'
						})
						console.log('oauto star');
						uni.login({
						  provider: 'weixin',
						  success: function (loginRes) {
							  console.log('loginres:',typeof loginRes);
							  if (loginRes.errMsg=='login:ok') {
										// 获取用户信息
										uni.showToast({
											title:'获取信息',
											icon:'loading'
										})
										uni.getUserInfo({
										  provider: 'weixin',
										  success: function (infoRes) {
											  uni.showToast({
											  	title:'获取成功',
											  	icon:'loading'
											  })
											  ef.submit({
											  	request:{s:['USERSELFBINDWEIXIN',['app',infoRes.userInfo]]},
											  	callback(data){
											  		console.log(data);
													console.log(JSON.stringify(data));
													fns.unionid()
											  	},
											  	error(err){
													console.log(err);
											  	}
											  })
											  
											},
										  fail(err){
											  console.log(err);
										  }
										});
							  }else{
								 console.log(err);
							  }
							  
						  },
						  fail(err) {
						  	console.log(err);
						  }
						  
						});
						// #endif
		}
	},
	components: {
		uniIcon,
		eonfox,
		fns
	}
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
	.top
		height 100upx
		margin-left 40upx
		.topTitle
			line-height 100upx
			font-size 26upx
			font-weight 550
	.phoneNumber
		width 90%
		height 80upx
		margin 20upx auto
		background #F2F2F2
		border-radius 10upx
		display flex
		align-items center 
		.phoneNumberTitle
			width 130upx
			text-align center
			font-size 28upx
	.section
		width 90%
		// height 80upx
		margin 20upx auto
		padding 18upx 0
		background #F2F2F2
		border-radius 10upx
		position relative
		top 5px
		.eyesBox
			position absolute
			right 10upx
			top 25upx
			height 100%
			width 60upx
			.eyes
				width 40upx
				height 40upx
				position absolute
				right 10upx
				top 2upx
	
	.active
		width 90%
		height 100upx
		margin 50px auto
		.activeBtn
			width 100%
			background #F76968
			color #fff
	.agreement 
			width 20%
			// padding 18upx 0
			margin 0 auto
			float right
			
			.radio
				color: rgb(16, 16, 16)
				font-size 12px
				// width 12px
	// 			.radioactive 
	// 				color: 
			.spantext
				color rgb(102, 190, 255)
				font-size 12px
	.section_verify
		width 90%
		height 65px
		margin 20upx auto
		padding 18upx 0
		background #F2F2F2
		border-radius 10upx
		position relative
		top 5px
		.verifyCodeText
			width 90px
			float left
			background #f2f2f2
			height 54px
		.verifyCodeImg
			width 50%
			height 60px
			float right
	
		
</style>
